<script setup>import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { post, store } from '../utils'

const router = useRouter();

const loginData = reactive({ account: '', password: '' });
const frm = ref(null);

const rules = {
    account: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 50 个字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 50 个字符', trigger: 'blur' },
    ]
}

function onSubmit() {

    frm.value.validate((valid) => {
        if (valid) {
            post('/api/admin/LoginWithAccount', loginData).then(function (res) {
                console.log(res);
                if (res.success) {
                    store.set('token', res.result.jwt);
                    router.push('/admin');
                }

            });

        } else {
            return false;
        }
    })
}

</script>

<template>
    <div class="bg">
        <el-form
            ref="frm"
            class="frm box"
            :model="loginData"
            :rules="rules"
            :show-message="true"
            status-icon
        >
            <h1 class="title">您好！</h1>
            <p class="subtitle">欢迎登录管理系统</p>
            <el-form-item prop="account">
                <el-input placeholder="请输入用户名" v-model="loginData.account"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请输入密码" type="password" v-model="loginData.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="loginBtn" type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<style lang="scss" scoped>
.bg {
    height: 100vh;
    // background-image: url("../assets/login-background.jpg");
    background-image: url("../assets/loginbg.jpg");
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .frm {
        width: 400px;
        box-sizing: border-box;
        margin-right: 120px;
        transform: scale(1.2);
        padding: 50px 30px 50px;
    }
    .loginBtn {
        width: 200px;
    }
}
</style>